<template>
	<div>
		<!--<div id="slider" class="mui-slider">-->
			<!--<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">-->
				<!--<div class="mui-scroll">-->
					<!--<a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in cates" :key="item.id" @tap="getPhotoListByCateId(item.id)">-->
						<!--{{ item.title }}-->
					<!--</a>-->
				<!--</div>-->
			<!--</div>-->
		<div id="slider" class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
						全部
					</a>
					<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
						家用生活
					</a>
					<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
						摄影设计
					</a>
					<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
						明星美女
					</a>
					<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
						空间设计
					</a>
					<a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
						军事财经
					</a>
					<a class="mui-control-item" href="#item7mobile" data-wid="tab-top-subpage-7.html">
						家居生活
					</a>
				</div>
			</div>
		</div>
		<ul>
			<li v-for="item in list" :key="item.url">
				<img v-lazy="item.url">
				<div class="title">{{ item.title }}</div>
			</li>
		</ul>
	</div>
</template>

<script>
import mui from '../../lib/mui/js/mui.min.js'


export default {
	data() {
	return {
		cates: [], // 所有分类的列表数组
		list: [
			{url:'http://img2.imgtn.bdimg.com/it/u=1486513396,554854054&fm=26&gp=0.jpg',title:'呼伦贝尔草原位于内蒙古自治区东北部，大兴安岭以西，因呼伦湖、贝尔湖而得名。地势东高西低，海拔在650～700米之间，总面积约为10万平方千米（一亿四千九百万亩）是世界著名的天然牧场，是世界四大草原之一，被称为世界上最好的草原,是全国旅游二十胜景之一。'},
			{url:'http://img5.imgtn.bdimg.com/it/u=359692897,3133312474&fm=26&gp=0.jpg',title:'塔里木盆地是大型封闭性山间盆地，地质构造上是周围被许多深大断裂所限制的稳定地块，盆地地势西高东低，微向北倾，旧罗布泊湖面高程780米，是盆地最低点。塔里木河位置偏于盆地北缘，水向东流。塔里木河位置偏于盆地北缘，水向东流。'},
			{url:'http://img5.imgtn.bdimg.com/it/u=1702333056,942573329&fm=26&gp=0.jpg',title:'三亚港位处三亚市中心东南面，古称临川港，自古以来便是著名的盐渔港，见证三亚由南海小渔村成长为世界级滨海旅游城市的沧桑变迁。上世纪50年代，三亚港改为商港，担负起海南岛东部和南部海上客货运的主要任务。上世纪80年代，凭借优越的港区自然条件，三亚港逐渐发展成为集客运、货运、渔港及旅游等于一体的综合性港口。'},
			{url:'http://img1.imgtn.bdimg.com/it/u=617012068,1940187705&fm=26&gp=0.jpg',title:'现代风格是比较流行的一种风格，追求时尚与潮流，非常注重居室空间的布局与使用功能的完美结合。现代主义也称功能主义，是工业社会的产物，其最早的代表是建于德国魏玛的包豪斯学校。其主题是：要创造一个能使艺术家接受现代生产最省力的环境---机械的环境。这种技术美学的思想是本世纪室内装饰最大的革命。'},
			{url:'http://img0.imgtn.bdimg.com/it/u=2568949503,801406017&fm=26&gp=0.jpg',title:'古典欧式风格是追求华丽、高雅的古典，设计风格直接对欧洲建筑、家具、绘画、文学甚至音乐艺术产生了极其重大的影响，具体可以分为六种风格来简述：罗马风格、哥特式风格、文艺复兴风格、巴洛克风格、洛可可风格、新古典主义风格。其中代表风格是：巴洛克风格、洛可可风格。古典欧式家具最为完整的继承和表达了古典欧式风格的精髓，最为让后世所熟知，塞特维那皇室家具为代表的古典欧式家具完整保存了古典欧式风格，在传承、发扬古典欧式文化起到了重要作用。'},
			{url:'http://img1.imgtn.bdimg.com/it/u=4190014518,1216676189&fm=11&gp=0.jpg',title:'简约起源于现代派的极简主义。简约风格就是简单而有品位。这种品位体现在设计上的细节的把握， 每一个细小的局部和装饰，都要深思熟虑。在施工上更要求精工细作。是一种不容易达到的效果。'},
			{url:'http://img1.imgtn.bdimg.com/it/u=1189910516,2021915459&fm=26&gp=0.jpg',title:'葡萄是世界最古老的果树树种之一，葡萄的植物化石发现于第三纪地层中，说明当时已遍布于欧、亚及格陵兰。葡萄原产亚洲西部，世界各地均有栽培，世界各地的葡萄约95%集中分布在北半球.葡萄为著名水果，生食或制葡萄干，并酿酒，酿酒后的酒脚可提酒石酸，根和藤药用能止呕、安胎。'},
			{url:'http://img2.imgtn.bdimg.com/it/u=3369374146,2273666090&fm=26&gp=0.jpg',title:'《睡美人》得到了金棕榈获奖导演简·坎皮恩的推荐，各国媒体与影评人也因此对影片表现出了很大的兴趣。然后该片正式上映后却口碑不佳，导演茱莉亚·李的电影思维相当混乱，视听手段贫乏，导演要表达的太多，却表意不明，主线外大量铺垫和支线，全都点到为止，让观众看得云里雾里。影片开始便透着稚嫩和不自信，直白详尽地呈现故事发展的因果关系，显得非常缺乏想像力，同时片中还处处充斥着许多“刻意”的情节和场景。'},
			{url:'http://img1.imgtn.bdimg.com/it/u=128411889,1466934580&fm=26&gp=0.jpg',title:' 化妆是运用化妆品和工具，采取合乎规则的步骤和技巧，对人体的面部、五官及其他部位进行渲染、描画、整理，增强立体印象，调整形色，掩饰缺陷，表现神采，从而达到美化视觉感受的目的。化妆，能表现出人物独有自然美；能改善人物原有的”形“”色“”质“，增添美感和魅力；能作为一种艺术形式，呈现一场视觉盛宴，表达一种感受。要强调的是，化妆不是女性专属，更没有性别限制，男性化妆频率在现实中也逐渐增多，在现实生活中，适当的化妆也是一种尊重他人的行为'},
			{url:'http://img1.imgtn.bdimg.com/it/u=2809931131,83999982&fm=26&gp=0.jpg',title:'动画技术较规范的定义是采用逐帧拍摄对象并连续播放而形成运动的影像技术。不论拍摄对象是什么，只要它的拍摄方式是采用的逐格方式，观看时连续播放形成了活动影像，它就是动画。'}
		] ,// 图片列表的数组

	};
},
created() {
//	this.getAllCategory();
//	// 默认进入页面，就主动请求 所有图片列表的数据
//	this.getPhotoListByCateId(0);
},
mounted() {
	// 当 组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
	// 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
	// 2. 初始化滑动控件
	mui(".mui-scroll-wrapper").scroll({
		deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
	});
},
methods: {
//	getAllCategory() {
//		// 获取所有的图片分类
//		this.$http.get("api/getimgcategory").then(result => {
//			if (result.body.status === 0) {
//				// 手动拼接出一个最完整的 分类列表
//				result.body.message.unshift({ title: "全部", id: 0 });
//				this.cates = result.body.message;
//			}
//		});
//	},
//	getPhotoListByCateId(cateId) {
//		// 根据 分类Id，获取图片列表
//		this.$http.get("api/getimages/" + cateId).then(result => {
//			if (result.body.status === 0) {
//				this.list = result.body.message;
//			}
//		});
//	}
}
};
</script>

<style lang="scss" scoped>
	* {
		/*阻止滑动中的无意义报错*/
		touch-action: pan-y;
	}

	ul{
		list-style: none;
		padding: 0 10px;
		magin:0;
		li{
			text-align: center;
			position:relative;
			img{
				width: 100%;
				height: 300px;
				margin-bottom: 5px;
				box-shadow: 0 0 6px #999;
			};
			img[lazy=loading] {
				width: 40px;
				height: 300px;
				margin: auto;
				vertical-align: middle;
			}
	        .title{
		        text-align: left;
		        position: absolute;
		        bottom: 15px;
		        max-height: 85px;
		        background-color: rgba(0, 0, 0, 0.5);
		        color: #ffffff;
		        font-size: 12px;
		        padding: 5px;
		        opacity: 0.8;
	        }
		}
	}

</style>